<template>
  <view class="landlord-home">
    <custom-nav-bar title="房东首页" />
    
    <view class="content">
      <uni-grid :column="4" :highlight="false" class="category-grid">
        <uni-grid-item v-for="(item, index) in categories" :key="index" @click="handleCategory(item)">
          <view class="category-item">
            <uni-icons :type="item.icon" size="30" color="#2979FF" />
            <text class="category-text">{{ item.label }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const categories = ref([
  { label: '新房', icon: 'home', path: '/pages/landlord/new-house' },
  { label: '二手房', icon: 'shop', path: '/pages/landlord/second-hand' },
  { label: '租房', icon: 'house', path: '/pages/landlord/rental' },
  { label: '商铺写字楼', icon: 'building', path: '/pages/landlord/commercial' }
])

const handleCategory = (item: any) => {
  uni.navigateTo({ url: item.path })
}
</script>

<style lang="scss" scoped>
.category-grid {
  margin: 20rpx;
  background: #fff;
  border-radius: $uni-border-radius-lg;
  box-shadow: $uni-box-shadow;
}

.category-item {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-text {
  font-size: 28rpx;
  color: $uni-text-color;
  margin-top: 15rpx;
}
.landlord-home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .content {
    flex: 1;
    padding: 30rpx;
    background: $uni-gradient-primary;
    box-shadow: $uni-box-shadow;
    border-radius: $uni-border-radius-lg;
    margin: 20rpx;
    min-height: calc(100vh - 160rpx);
  }
}
</style>